/* 修改内置样式 */

/* 修改表单placehold的样式 */
input::placeholder {
    color: red;
}

/* 修改滚动条样式 */
.side-nav-box::-webkit-scrollbar {
    /* 竖滚动条的宽度 */
    width: 6px; 
    /* 横滚动条的宽度 */
    height: 6px; 
    background: 0 0;
    border-radius: 9px;
    background-color: #fafafa;
}
.side-nav-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #c2c2c2;
}


/* 其他 */

/* 超出部分用省略号 */
/* 一排 */
div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 多排 */
div {
    overflow: hidden;
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
    -webkit-line-clamp: 2; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
}

/* 背景层兼容图片与颜色 */
div {
    background: rgba(0, 0, 0, .5) url('../../img/admin-login-bg.jpg');
    background-blend-mode: multiply; /* 属性定义了背景层的混合模式，可以混合图片与颜色 */
}

/* 使用transition实现水平垂直居中 */
.transform-box {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #00f;
}
.transform-box .middle-center {
    width: 100px;
    background-color: #f00;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
}

/* 当出现外边距合并时，可以 */
/* 给最后面的元素加上浮动（left/right） 或  给其中一个元素加上display:inline-block; */
